<template>
  <div>
    <div>
      <el-form :inline="true" :model="form" style="width: 100%;margin-bottom: 20px;">

          <el-input size="mini" v-model="form.user_id"  placeholder="用户id" style="width: 12%;"></el-input>
          <el-input size="mini" v-model="form.user_name"  placeholder="用户名" style="width: 12%;"></el-input>
          <el-input size="mini" v-model="form.user_nick_name"  placeholder="用户昵称" style="width: 12%;"></el-input>

          <el-select size="mini" v-model="form.user_sex" placeholder="性别" style="width: 8%;">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>

          <el-select v-model="form.gr_id" placeholder="角色" style="width: 12%;" size="mini">
            <el-option v-for="(gr,n) in groupList"  :label="gr.gr_name" :value="gr.gr_id" :key="n"></el-option>
          </el-select>
          <el-button size="mini"  @click="resetSearchUser">重置</el-button>
          <el-button size="mini" type="success" icon="el-icon-search" @click="searchUser">查询</el-button>
          <el-button size="mini" type="primary" icon="el-icon-circle-plus" @click="addUser">添加</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteUser">删除</el-button>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      stripe
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
      align="center">
      </el-table-column>
      <el-table-column
        prop="user_id"
        label="用户id"
        minWidth="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="user_name"
        label="用户名"
        minWidth="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="user_nick_name"
        label="昵称"
        minWidth="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="user_sex"
        label="性别"
        minWidth="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="group.gr_name"
        label="角色"
        minWidth="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="user_time"
        label="注册时间"
        minWidth="120"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        minWidth="180"
        align="center">
        <template slot-scope="scope">
          <el-button size="mini"  @click="editUser(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="success" @click="editUserPassword(scope.$index, scope.row)">修改密码</el-button>
          <el-button type="danger" icon="el-icon-delete"  size="mini" @click="deleteUserInfoById(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 40,50]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    <!--添加用户-->
    <add-user-dialog v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog" @addUserClose="closeDialog"></add-user-dialog>
    <!--编辑用户-->
    <edit-user-dialog v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog" :userData="userData" @editUserClose="closeDialog"></edit-user-dialog>
    <!--修改密码-->
    <update-user-pwd-dialog v-if="isShowUpdatePwdDialog" :isShowUpdatePwdDialog="isShowUpdatePwdDialog" :updatePwdData="updatePwdData" @updateUserPwdClose="closeDialog"></update-user-pwd-dialog>
  </div>
</template>
<script>
  import {getAllUserByGroupId,updateUserByUserId,updateUserPasswordById,findUserByCondition,addUser,deleteUserById} from '@/api/user'
  import {getAllGroup} from '@/api/permission'
  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button";
  import AddUserDialog from './component/AddUserInfo.vue'
  import EditUserDialog from './component/EditUserInfo.vue'
  import updateUserPwdDialog from './component/updatepawword.vue'
  export default{
    components: {ElButton,AddUserDialog,EditUserDialog,updateUserPwdDialog},
    data(){
          return {
            isShowAddDialog:false,
            isShowEditDialog:false,
            isShowUpdatePwdDialog:false,
            tableData:[],
            groupList:[],
            userData:null,
            updatePwdData:null,
            form:{
              user_id:"",
              user_name:"",
              user_sex:"",
              user_nick_name:"",
              gr_id:null
            },
            pageInfo:{
              page:1,//页数
              size:10, //页面大小
              total:0 //页总数
            },
            requestData:{
                pageSize:10,
                pageNum:1,
                map:{}
            }
          }
      },
      mounted(){
         this.getAllGroupList();
      },
      methods:{
        //根据条件查询所有用户信息
        getDataList(){

          this.requestData.map.user_id = this.form.user_id.trim();
          this.requestData.map.user_name = this.form.user_name.trim();
          this.requestData.map.user_sex = this.form.user_sex;
          this.requestData.map.user_nick_name = this.form.user_nick_name.trim();
          this.requestData.map.gr_id = this.form.gr_id;

          //console.log(this.requestData);

          findUserByCondition(this.requestData).then(res=>{
              if(res.code == 200){
                  this.tableData = res.data.data;
                  this.pageInfo.total = res.data.total;
              }
          });
        },

        resetSearchUser(){
          this.form = {
            user_id:"",
              user_name:"",
              user_sex:"",
              user_nick_name:"",
              gr_id:null
          };

          this.requestData.pageNum = 1;
          this.pageInfo.page = 1;

          this.getAllGroupList();
        },

        //每页的条数发生改变时调用
        handleSizeChange(size){
            this.requestData.pageSize = size;
            this.pageInfo.size = size;
            this.getDataList();
        },

        //页数发生改变时调用
        handleCurrentChange(page){
           this.requestData.pageNum = page;
           this.pageInfo.page = page;
           this.getDataList();
        },



        //获取所有角色信息
        getAllGroupList(){
          getAllGroup().then(res=>{
              if(res.code == 200){
                  this.groupList = res.data;
                  if(this.groupList.length > 0){
                      this.form.gr_id = this.groupList[0].gr_id;
                  }
                  //获取用户信息
                this.getDataList();
              }
          })
        },

        //复选框选择的数据
        handleSelectionChange(obj){

        },

        //根据条件查询用户
        searchUser(){
          this.getDataList();
        },

        //添加用户
        addUser(){
           this.isShowAddDialog = true
        },

        //删除用户
        deleteUser(){

        },

        deleteUserInfoById(row){
          this.$confirm('此操作将删除用户信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteUserById([row]).then(res=>{
              if(res.code == 200){
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
              }
            })
          }).catch(() => {

          });
        },

        //编辑用户
        editUser(index,row){
            this.userData = row;
            this.isShowEditDialog = true;
        },

        //修改密码
        editUserPassword(index,row){
            this.updatePwdData = row;
            this.isShowUpdatePwdDialog = true;
        },

        //关闭弹出框
        closeDialog(type){
            if(type == "add"){
                this.isShowAddDialog = false;
            }else if(type == "edit"){
                this.isShowEditDialog = false;
            }else if(type == "pwd"){
                this.isShowUpdatePwdDialog = false;
            }
          this.getDataList();
        }

      }
  }
</script>
